<template>
    <div class="order">
        <!-- 我的订单头部 -->
        <div class="order-header">
            <div class="order-header-content">
                <p>
                    <i class="el-icon-s-order" style="font-size: 30px;color: #ff6700;"></i>
                    我的订单
                </p>
            </div>
        </div>
        <!-- 我的订单头部END -->

        <!-- 我的订单主要内容 -->
        <div v-if="orderList.length > 0" class="order-content" v-for="(item,index) in orderList" :key="index">
            <!--我的订单一个整体start-->
            <div class="content">
                <ul>
                    <!-- 我的订单表头 -->
                    <li class="order-info">
                        <div class="order-id">订单编号: {{item.order_id}}</div>
                        <div class="order-time">订单时间:{{item.create_time}} </div>
                    </li>
                    <li class="header">
                        <div class="pro-img"></div>
                        <div class="pro-name">商品名称</div>
                        <div class="pro-price">单价</div>
                        <div class="pro-num">数量</div>
                        <div class="pro-total">小计</div>
                    </li>
                    <!-- 我的订单表头END -->
                    <!-- 订单列表 -->
                    <li class="product-list" v-for="(product,i) in item.products" :key="i">
                        <div class="pro-img">
                            <router-link :to="'/detail/' + product.id">
                                <img :src="product.head_img_url"/>
                            </router-link>
                        </div>
                        <div class="pro-name">
                            <router-link :to="/detail/ + product.id"
                            >{{product.name}}</router-link>
                        </div>
                        <div class="pro-price">{{product.price}}元</div>
                        <div class="pro-num">{{product.num}}</div>
                        <div class="pro-total pro-total-in">{{product.price * product.num}}元</div>
                    </li>
                </ul>
                <div class="order-bar">
                    <div class="order-bar-left">
            <span class="order-total">
              共
              <span class="order-total-num">{{item.productTotal}}</span> 件商品
            </span>
                    </div>
                    <div class="order-bar-right">
            <span>
              <span class="total-price-title">合计：</span>
              <span class="total-price">{{item.orderTotalPrice}}元</span>
            </span>
                    </div>
                    <!-- 订单列表END -->
                </div>
            </div>
            <!--我的订单一个整体end-->

            <div style="margin-top:-40px;"></div>
        </div>
        <!-- 我的订单主要内容END -->

        <!-- 订单为空的时候显示的内容 -->
        <div v-if="orderList.length == 0" class="order-empty">
            <div class="empty">
                <h2>您的订单还是空的！</h2>
                <p>快去购物吧！</p>
            </div>
        </div>
        <!-- 订单为空的时候显示的内容END -->
    </div>
</template>
<script>
    export default {
        data() {
            return {
                userInfo: {},
                orderList: [], // 订单列表
            };
        },
        methods: {
            // 初始化用户信息
            initUserInfo() {
                let json_userInfo = localStorage.getItem('userInfo');
                let userInfo = JSON.parse(json_userInfo);
                if (json_userInfo == null) {
                    // 没有登录
                    this.errorNotify('没有登录','用户未登录');
                }
                else {
                    this.userInfo = userInfo;
                    this.getOrderList()
                }
            },
            // 获取订单列表
            getOrderList() {
                this.$axios({
                    method: 'get',
                    url: this.baseUrl + '/api/v1/order/orders',
                    headers: {
                        'access-token': this.userInfo.token,
                        'telephone': this.userInfo.telephone
                    }
                }).then(response => {
                    let result = response.data;
                    let orderArr = result.data;
                    let orderList = [];
                    orderArr.forEach((item) => {
                        let productsList = JSON.parse(item.products);
                        let productTotal = 0; // 订单的商品个数
                        let orderTotalPrice = 0; // 订单的总价
                        productsList.forEach(product => {
                           productTotal += product.num;
                           orderTotalPrice += (product.num *product.price);
                        })
                        item['productTotal'] = productTotal;
                        item['orderTotalPrice'] = orderTotalPrice;
                        item['products'] = productsList;
                        orderList.push(item);
                    })
                    this.orderList = orderList;
                }).catch(error => {
                    console.log(0)
                    console.log(error)
                })
            },
            // 提示信息 title string 标题 message string 提示信息
            notify(title, message) {
                const h = this.$createElement;
                this.$notify({
                    title: title,
                    message: h('i', {style: 'color: teal'}, message)
                });
            },
            // 错误提示
            errorNotify(title, message) {
                const h = this.$createElement;
                this.$notify({
                    title: title,
                    type: "error",
                    duration: 2000,
                    message: h('i', {style: 'color: red'}, message)
                });
            },

        },
        activated() {
            this.initUserInfo();
        }
    };
</script>
<style scoped>
    .order {
        background-color: #f5f5f5;
        padding-bottom: 20px;
    }
    /* 我的订单头部CSS */
    .order .order-header {
        height: 64px;
        border-bottom: 2px solid #ff6700;
        background-color: #fff;
        margin-bottom: 20px;
    }
    .order .order-header .order-header-content {
        width: 1225px;
        margin: 0 auto;
    }
    .order .order-header p {
        font-size: 28px;
        line-height: 58px;
        float: left;
        font-weight: normal;
        color: #424242;
    }
    /* 我的订单头部CSS END */
    .order .content {
        width: 1225px;
        margin: 0 auto;
        background-color: #fff;
        margin-bottom: 50px;
    }

    .order .content ul {
        background-color: #fff;
        color: #424242;
        line-height: 85px;
    }
    /* 我的订单表头CSS */
    .order .content ul .order-info {
        height: 60px;
        line-height: 60px;
        padding: 0 26px;
        color: #424242;
        border-bottom: 1px solid #ff6700;
    }
    .order .content ul .order-info .order-id {
        float: left;
        color: #ff6700;
    }
    .order .content ul .order-info .order-time {
        float: right;
    }

    .order .content ul .header {
        height: 85px;
        padding-right: 26px;
        color: #424242;
    }
    /* 我的订单表头CSS END */

    /* 订单列表CSS */
    .order .content ul .product-list {
        height: 85px;
        padding: 15px 26px 15px 0;
        border-top: 1px solid #e0e0e0;
    }
    .order .content ul .pro-img {
        float: left;
        height: 85px;
        width: 120px;
        padding-left: 80px;
    }
    .order .content ul .pro-img img {
        height: 80px;
        width: 80px;
    }
    .order .content ul .pro-name {
        float: left;
        width: 380px;
    }
    .order .content ul .pro-name a {
        color: #424242;
    }
    .order .content ul .pro-name a:hover {
        color: #ff6700;
    }
    .order .content ul .pro-price {
        float: left;
        width: 160px;
        padding-right: 18px;
        text-align: center;
    }
    .order .content ul .pro-num {
        float: left;
        width: 190px;
        text-align: center;
    }
    .order .content ul .pro-total {
        float: left;
        width: 160px;
        padding-right: 81px;
        text-align: right;
    }
    .order .content ul .pro-total-in {
        color: #ff6700;
    }

    .order .order-bar {
        width: 1185px;
        padding: 0 20px;
        border-top: 1px solid #ff6700;
        height: 50px;
        line-height: 50px;
        background-color: #fff;
    }
    .order .order-bar .order-bar-left {
        float: left;
    }
    .order .order-bar .order-bar-left .order-total {
        color: #757575;
    }
    .order .order-bar .order-bar-left .order-total-num {
        color: #ff6700;
    }
    .order .order-bar .order-bar-right {
        float: right;
    }
    .order .order-bar .order-bar-right .total-price-title {
        color: #ff6700;
        font-size: 14px;
    }
    .order .order-bar .order-bar-right .total-price {
        color: #ff6700;
        font-size: 30px;
    }
    /* 订单列表CSS END */

    /* 订单为空的时候显示的内容CSS */
    .order .order-empty {
        width: 1225px;
        margin: 0 auto;
    }
    .order .order-empty .empty {
        height: 300px;
        padding: 0 0 130px 558px;
        margin: 65px 0 0;
        background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
        color: #b0b0b0;
        overflow: hidden;
    }
    .order .order-empty .empty h2 {
        margin: 70px 0 15px;
        font-size: 36px;
    }
    .order .order-empty .empty p {
        margin: 0 0 20px;
        font-size: 20px;
    }
    /* 订单为空的时候显示的内容CSS END */
</style>
